import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './todayearn.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask, Toast } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
import icon_nav_right from "@/assets/icon_nav_right.png"


import NavigateBar from "@/components/NavigateBar";
import { getCoinInfo } from "@/utils/storage";
import { getTransferInDetail } from "@/store/actions/user";
import { LangThai } from "@/utils/langThai";


/**
 * 登录页
 */
export default function TodayEarn() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    // 当前 信息
    const [curResultInfo, setCurResultInfo] = useState({})

    // 当前 币
    const [curCoin, setCurCoin] = useState({})

    // 文案翻译
    const [curLang, setCurLang] = useState(LangThai);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false);

        // 获取当前币
        const coinInfo = getCoinInfo();
        const coninType = coinInfo.coinType || "";
        setCurCoin(coinInfo);

        // 获取邀请好友收益列表
        doGetTransferInDetail(coninType);

        //打点
        doHitEvent("TODAY_EARN_START")

        return () => {
            //打点
            doHitEvent("TODAY_EARN_END")
        }
    }, [])


    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    // 获取转入收益详情
    const doGetTransferInDetail = async (coinType) => {
        console.log("doGetTransferInDetail: " + coinType);

        if (!coinType || coinType.length <= 0) {
            Toast.show(curLang.earnTheCoinTypeCanNotBeNull);
            return;
        }

        try {
            //显示loading
            setMaskVisible(true)

            //获取Action
            const action = getTransferInDetail(coinType, onDoGetTransferInDetailCallback)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    // 获取转入收益详情 返回
    const onDoGetTransferInDetailCallback = (success, data) => {
        //关闭loading
        setMaskVisible(false)
        console.log('获取转入收益详情 返回: ' + success);

        if (success && data) {
            // {
            //     "totalIncome": 0,
            //     "unExtractIncome": 0,
            //     "pendingIncome": 0,
            //     "extractIncome": 0,
            //     "totalTimes": 3,
            //     "times": 3,
            //     "usedTimes": 0
            // }

            // 更新
            setCurResultInfo(data);
        }
    };

    // 点击 today earn detail
    const onHandleTodayEarnDetailClick = (e) => {
        history.push('/todayearndetail');
    }

    // 点击 today earn detail
    const onHandleTodayEarnDetailWithdrawTimesClick = (e) => {
        history.push('/todayearndetailwithdrawtimes');
    }

    return (
        <div className='pageRoot pageBackgroundColorGray'>
            <NavigateBar theme="white" showLogout={false} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>{curLang.todayEarnDetail}</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}


            <div className="pageContentColumnFullPaddingHorizontal16px pageMarginTop16px">

                <div className={styles.todayEarnMenuContent}>
                    <div className={styles.todayEarnMenuHeaderRow} onClick={onHandleTodayEarnDetailClick}>
                        <div className={styles.todayEarnMenuHeaderTitle}>{curLang.todayEarnTotalEarn}</div>
                        <img className={styles.todayEarnMenuExtIcon} alt="" src={icon_nav_right} />
                    </div>

                    <div className={styles.todayEarnHeaderValue}>{curResultInfo.totalIncome} USDT</div>

                    <div className={styles.todayEarnMenuRow}>
                        <div className={styles.todayEarnMenuTitle}>{curLang.todayEarnWithdrawable}</div>
                        <div className={styles.todayEarnMenuValue}>{curResultInfo.unExtractIncome} USDT</div>
                    </div>

                    <div className={styles.todayEarnMenuRow}>
                        <div className={styles.todayEarnMenuTitle}>{curLang.todayEarnPending}</div>
                        <div className={styles.todayEarnMenuValue}>{curResultInfo.pendingIncome} USDT</div>
                    </div>

                    <div className={`${styles.todayEarnMenuRow} ${styles.todayEarnMenuRowNoneBorder}`}>
                        <div className={styles.todayEarnMenuTitle}>{curLang.todayEarnWithdrawn}</div>
                        <div className={styles.todayEarnMenuValue}>{curResultInfo.extractIncome} USDT</div>
                    </div>
                </div>

                <div className={`${styles.todayEarnMenuContent} pageMarginTop16px`}>
                    <div className={styles.todayEarnMenuHeaderRow} onClick={onHandleTodayEarnDetailWithdrawTimesClick}>
                        <div className={styles.todayEarnMenuHeaderTitle}>{curLang.todayEarnWithdrawalTimes}</div>
                        <img className={styles.todayEarnMenuExtIcon} alt="" src={icon_nav_right} />
                    </div>

                    <div className={styles.todayEarnHeaderValue}>{curResultInfo.totalTimes}</div>

                    <div className={styles.todayEarnMenuRow}>
                        <div className={styles.todayEarnMenuTitle}>{curLang.todayEarnAvailableTimes}</div>
                        <div className={styles.todayEarnMenuValue}>{curResultInfo.times}</div>
                    </div>

                    <div className={`${styles.todayEarnMenuRow} ${styles.todayEarnMenuRowNoneBorder}`}>
                        <div className={styles.todayEarnMenuTitle}>{curLang.todayEarnUsedTimes}</div>
                        <div className={styles.todayEarnMenuValue}>{curResultInfo.usedTimes}</div>
                    </div>
                </div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}